<template>
  <div class="app-container Picturesettings">
    <el-form :model="settingForm"
             label-width="80px"
             class="setting-form">
      <el-form-item label="图片大小">
        <el-input v-model="settingForm.picStoreSize"
                  :class="
            settingForm.picStoreSize != '' && chkMinus_picStoreSize
              ? ''
              : 'chk-null'
          "
                  type="number">
          <template slot="prepend">不超过</template>
          <el-select v-model="settingForm.picStoreUnit"
                     slot="append"
                     placeholder="请选择"
                     style="width: 90px">
            <el-option v-for="item in select_StoreSizeOptionsList"
                       :key="item.value"
                       :label="item.lable"
                       :value="item.value"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="图片尺寸">
        <div class="pic-size"
             :class="
            settingForm.picSize_W != '' && 
            settingForm.picSize_H != '' &&
            chkMinus_picSize
              ? ''
              : 'chk-null'
          ">
          <el-input v-model="settingForm.picSize_W"
                    type="number">
            <template slot="append">宽</template>
          </el-input>
          <span>×</span>
          <el-input v-model="settingForm.picSize_H"
                    type="number">
            <template slot="append">高</template>
          </el-input>
        </div>
      </el-form-item>

      <el-form-item label="图片格式">
        <div :class="chkSelectList ? '' : 'chk-null'">
          <div v-for="(item, index) in selectList"
               :key="index"
               class="select"
               v-show="selectList.length != 0">
            <el-select class="select-item"
                       v-model="item.selectValue"
                       @change="changeSelectValue(index)">
              <el-option v-for="(op, index) in select_FormatOptionsList.filter(
                  (item) => !settingForm.picFormat.includes(item)
                )"
                         :key="index"
                         :label="op"
                         :value="op"></el-option>
            </el-select>

            <el-button class="select-del"
                       @click="deleteFormat(index)"
                       circle
                       plain
                       size="mini"
                       icon="el-icon-minus"
                       type="info"></el-button>
            <el-button class="select-del"
                       @click="newFormat()"
                       icon="el-icon-plus"
                       size="mini"
                       circle
                       plain
                       v-show="selectList.length == index + 1"></el-button>
          </div>
          <div class="select-tip"
               v-show="selectList.length == 0">
            <i class="el-icon-s-opportunity"></i>
            <span class="text">暂无格式限制，点击“+”添加格式限制</span>
          </div>
          <div class="add-btn"
               v-show="selectList.length == 0">
            <el-button @click="newFormat()"
                       icon="el-icon-plus"
                       size="mini"
                       circle
                       plain></el-button>
          </div>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="onSubmit()"
                   v-hasPremi="['base:config:editPhoto']">保存设置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getConfigListPhotoApi, getConfigEditPhotoApi } from "@/wss/api/base/config";
export default {
  name: "PictureSettings",

  data () {
    return {
      settingForm: {
        picStoreSize: "", //大小
        picStoreUnit: "",
        picSize_W: "", //宽度
        picSize_H: "", //高度
        picFormat: [], //格式数组
      },
      select_StoreSizeOptionsList: [
        //单位可选列表
        {
          lable: "B",
          value: "B",
        },
        {
          lable: "KB",
          value: "KB",
        },
        {
          lable: "MB",
          value: "MB",
        },
      ],
      select_FormatOptionsList: ["jpg", "png"], //可选择的格式
      selectList: [] /* [ {selectValue: 'xxx'}, .... ] */,

      //------- 条件检查 -------//
      chkSelectList: true,
      //负值检查(ture为无负数)
      chkMinus_picStoreSize: true,
      chkMinus_picSize: true,
      //------- 配置项ID -------//
      picStoreSize_Id: "",
      picStoreUnit_Id: "",
      picSize_W_Id: "",
      picSize_H_Id: "",
      picFormat_Id: "",
    };
  },
  computed: {},
  watch: {
    selectList: {
      handler: function () {
        var index = this.selectList.findIndex((item) => {
          return item.selectValue == "";
        });
        if (index == "-1" && this.selectList.length != 0) {
          this.chkSelectList = true;
        } else {
          this.chkSelectList = false;
        }
      },
      deep: true,
    },
    settingForm: {
      handler: function () {
        if (this.settingForm.picStoreSize < 0) {
          this.chkMinus_picStoreSize = false;
        } else {
          this.chkMinus_picStoreSize = true;
        }
        if (this.settingForm.picSize_W < 0 || this.settingForm.picSize_H < 0) {
          this.chkMinus_picSize = false;
        } else {
          this.chkMinus_picSize = true;
        }
      },
      immediate: true,
      deep: true,
    },
  },

  mounted () {
    this.getConfigListPhotoApi();
  },

  methods: {
    initSelectList () {
      this.selectList = [];
      for (let i = 0; i < this.settingForm.picFormat.length; i++) {
        let str = this.settingForm.picFormat[i];
        this.selectList.push({ selectValue: str });
      }
    },
    newFormat () {
      var index = this.selectList.findIndex((item) => {
        return item.selectValue == "";
      });
      if (index != -1) {
        this.$modal.msgWarning("请先填写空白的图片限制信息");
      } else if (
        this.select_FormatOptionsList.length == this.selectList.length
      ) {
        this.$modal.msgWarning("下拉列表已无备选选项");
      } else {
        this.selectList.push({ selectValue: "" });
        this.settingForm.picFormat.push("");
        // console.log("newFormat", this.selectList);
        // console.log("newFormat", this.settingForm.picFormat);
      }
    },
    deleteFormat (i) {
      this.selectList.splice(i, 1);
      this.settingForm.picFormat.splice(i, 1);
      // console.log("deleteFormat", this.selectList);
      // console.log("deleteFormat", this.settingForm.picFormat);
    },
    changeSelectValue (i) {
      this.settingForm.picFormat[i] = this.selectList[i].selectValue;
      // console.log("changeSelectValue", this.selectList);
      // console.log("changeSelectValue", this.settingForm.picFormat);
    },

    //------- 处理 初始化 分配 图片设置 -------//
    assignSettingData (data) {
      data.forEach((item) => {
        if (item.type == "p_store_unit") {
          this.settingForm.picStoreUnit = item.value;
          this.picStoreUnit_Id = item.idStr;
        } else if (item.type == "p_store") {
          this.settingForm.picStoreSize = item.value;
          this.picStoreSize_Id = item.idStr;
        } else if (item.type == "p_size_w") {
          this.settingForm.picSize_W = item.value;
          this.picSize_W_Id = item.idStr;
        } else if (item.type == "p_size_h") {
          this.settingForm.picSize_H = item.value;
          this.picSize_H_Id = item.idStr;
        } else if (item.type == "p_format") {
          let arr = item.value.split(",");
          this.settingForm.picFormat = [];
          arr.forEach((element) => {
            this.settingForm.picFormat.push(element);
          });
          this.picFormat_Id = item.idStr;
        }
      });
    },

    //------- 提交数据 -------//
    onSubmit () {
      if (
        this.settingForm.picStoreSize != "" &&
        this.settingForm.picSize_W != "" &&
        this.settingForm.picSize_H != "" &&
        this.chkSelectList
      ) {
        if (
          this.settingForm.picStoreSize *
          this.settingForm.picSize_W *
          this.settingForm.picSize_H >
          0
        ) {
          let setting = this.settingForm;
          let data = [
            { id: this.picStoreSize_Id, value: setting.picStoreSize },
            { id: this.picStoreUnit_Id, value: setting.picStoreUnit },
            { id: this.picSize_W_Id, value: setting.picSize_W },
            { id: this.picSize_H_Id, value: setting.picSize_H },
            { id: this.picFormat_Id, value: setting.picFormat.join(',') },
          ];
          console.log(data);
          this.getConfigEditPhotoApi(data);
        } else {
          this.$modal.msgError("存在值为负数的配置项（红框标记）");
        }
      } else {
        this.$modal.msgError("存在空的配置项（红框标记）");
      }
    },

    /* 获取数据 */
    //------- 获取 配置 图片设置 -------//
    async getConfigListPhotoApi (data) {
      let result = await getConfigListPhotoApi(data).then((res) => res);
      if (result.code == "200") {
        this.assignSettingData(result.rows);
        this.initSelectList();
      } else {
        this.$modal.msgError("获取配置失败：", result);
      }
    },
    //------- 修改 配置 图片设置 -------//
    async getConfigEditPhotoApi (data) {
      let result = await getConfigEditPhotoApi(data).then((res) => res);
      if (result.code == "200") {
        this.$modal.msgSuccess("设置已保存");
        this.getConfigListPhotoApi();
      } else {
        this.$modal.msgError("获取配置失败：", result);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Picturesettings {
  .setting-form {
    width: 400px;
    .pic-size {
      display: flex;
      span {
        margin: 0 10px;
      }
    }
    .select {
      margin-bottom: 10px;
      .select-item {
        width: 240px;
      }
      .select-del {
        margin-left: 10px;
      }
    }
    .select-tip {
      color: rgb(82, 86, 114);
      .text {
        font-style: italic;
      }
    }
    .add-btn {
      text-align: center;
    }
  }
}
.chk-null {
  border: 1px solid #f56c6c;
  border-radius: 5px;
  padding: -1px;
}
</style>